<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>scrollIntoView.html</title>
	<style type="text/css">
		#myDiv {
            height: 2000px;
            background-color: gray;
        }

        #roll_top {
            height: 2000px;
            background-color: green;
            color: #FFF;
            font-size: 50px;
            position: relative;
        }

        #bottom {
            position: absolute;
            display: block;
            left: 0;
            bottom: 0;
        }
        /*scroll*/
        .main div {
            height: 1000px;
            width: 300px;
            margin: 20px;
            background-color: #C0C0C0;
        }

        #nav {
            position: fixed;
            width: 100px;
            height: 200px;
            top: 40%;
            right: 10px;
        }

        #nav div {
            cursor: pointer;
            text-align: center;

        }
	</style>
</head>
<body>
	<div>
	    <h2>scrollIntoView</h2>
	    <button id="roll1">scrollIntoView(false)</button>
	    <button id="roll2">scrollIntoView(true)</button>

	    <div>
	        <div id="myDiv"></div>
	        <div id="roll_top">
	            scrollIntoView(ture)元素上边框与视窗顶部齐平
	            <span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
	        </div>
	    </div>
	</div>
	<div>
	    <h2>scroll</h2>
	    <div id="nav">
	        <div class="f1">floor1</div>
	        <div class="f2">floor2</div>
	        <div class="f3">floor3</div>
	        <div class="f4">floor4</div>
	        <div class="f5">floor5</div>
	    </div>
	    <p>
	        页面结构
	    </p>
	    <div class="main">
	        <div id="f1">测试1</div>
	        <div id="f2">测试2</div>
	        <div id="f3">测试3</div>
	        <div id="f4">测试4</div>
	        <div id="f5">测试5</div>
	    </div>
	</div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
	window.onload = function () {
        document.querySelector("#roll1").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(false);
        };
        document.querySelector("#roll2").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(true);
        };
    }

     $(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件
            var wst = $(window).scrollTop(); //滚动条距离顶端值
            for (var i = 1; i < 6; i++) {             //加循环
                if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置
                    $('#nav div').css("background-color", "white");
                    $(".f" + i).css("background-color", "red");
                }
            }
        });
        $('#nav div').click(function () {
            $('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);
//          $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()

        });
    });
</script>
</html>